<template>
	<view class="page" style="background-color: #f6f6f6;">
		
		<cu-custom bgColor="#fff" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">信息采集</block>
		</cu-custom>
	<view class="ithui-content">
		<view class="upload" style="margin:10rpx;border-radius:18px;margin-top:70rpx;padding:34rpx;background-color: #fff;">
			<view style="display: flex;justify-content: space-between;">
				<view>证件类型:</view>
				<view style="display:flex;width:50%;justify-content: flex-end;line-height: 34rpx;">
					<image src="../../static/style-two/select.png" style="width:30rpx;height: 30rpx;"></image>
					<span style="margin-left: 10rpx;">身份证</span>
				</view>
			</view>
			<view class="upload-box">
				<view class="upload-item">
					<u-upload @afterRead="afterRead" :fileList="uploadA" @delete="deletePic" name="uploadA" multiple
						:maxCount="1" width="145" height="115">
						<view class="tupian" style="width: 178px;height: 114px;" @click="chooseImg">
							<image style="width: 180px;height: 114px;padding: 15px;"  v-for="item in imgArr" :src="item" mode="" >
							</image>
						</view>
						
					</u-upload>
					<view class="intro" style="border-radius:0 0 10px 10px;wxcs_style_border-radius:0 0 20rpx 20rpx;text-align: center;color: #3694EF;
">请上传身份证原件人像面</view>
				</view>
				
			</view>
			<view >
			    <button style="height:10rpx;line-height:10rpx;width:43%;border-radius:10rpx;background-color: #3694EF;color: #fff;" class="submit2" @click="submitTo">身份证识别</button>
			</view>
		</view>
		<view style="line-height:39px;margin-left:40rpx;margin-top:11rpx;padding-top:11rpx;">拍摄须知</view>
		<view class="mt-20 expect" style="margin:20rpx;border-radius:36rpx;">
			<view class="error">
				<div class="error-item">
					<!-- ../../static/style-two/yesok.png -->
					<image src="../../static/style-two/yesok.png" />
					<text>标准</text>
				</div>
				<div class="error-item">
					<image src="../../static/style-two/error_01.png" />
					<text>边框缺失</text>
				</div>
				<div class="error-item">
					<image src="../../static/style-two/error_02.png" />
					<text>边框模糊</text>
				</div>
				<div class="error-item">
					<image src="../../static/style-two/error_03.png" />
					<text>闪光强烈</text>
				</div>
			</view>
		</view>
		<view class="shoudong" style="display:flex;justify-content:flex-end;line-height:34rpx;">
			<image src="../../static/style-two/waring.png" style="width:34rpx;height:35rpx;margin-right:11rpx;"></image>
			<text @click="tiaoZhuan">
					跳过识别,手动录入
			</text>
		</view>
	</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				uploadA: [],
				uploadB: [],
				imgArr:[]
			}
		},
		onLoad() {},
		methods: {
			chooseImg(){
				console.log('上传图片'),
				uni.chooseImage({
					count:5, //在h5浏览器限制不住
					success:res=>{
					this.imgArr=res.tempFilePaths
					}
				})
			},
			previewImg(current){
				uni.previewImage({
					current,	//当前的图片路径必填
					urls:this.imgArr, //数组文件路径必填
					loop:true,   //循环在5+app才有效
					indicator:"default" ,//指数器同样也是5+app有效
					success: res => {
			
					}
				})
			},
			//照片清空
			eliminate(){
				this.imgArr = [];
			},
			tiaoZhuan(){
				uni.navigateTo({
					url:"../procurementDanAdd/procurementDanAdd"
				})
				this.eliminate();
			},
			// 选择图片
			afterRead(event) {
				this[event.name] = event.file
			},
			// 删除图片
			deletePic(event) {
				this[event.name] = []
			},
			// async submit() {
			// 	if (this.uploadA.length === 0) {
			// 		uni.showToast({
			// 			title: '',
			// 			icon: 'none',
			// 			duration: 2000
			// 		});
			// 	} else {
			// 		const uploads = [this.uploadA, this.uploadB]
			// 		const form = {
			// 			...this.userInfo,
			// 			url: []
			// 		}
			// 		uploads.forEach(item => {
			// 			this.uploadFilePromise(item[0]).then(res => {
			// 				form.url.push(res)
			// 			}).catch(err => {
			// 				uni.showToast({
			// 					title: '图片上传失败，请稍后重试',
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			// 				return
			// 			})
			// 		})
			// 		console.log(form)
			// 	}
			// },
			// uploadFilePromise(event) {
			// 	return new Promise((resolve, reject) => {
			// 		// let a = uni.uploadFile({
			// 		// 	url: 'http://192.168.1.100/upload', // 仅为示例，非真实的接口地址
			// 		// 	filePath: event,
			// 		// 	name: 'file',
			// 		// 	formData: {},
			// 		// 	success: (res) => {
			// 		// 		setTimeout(() => {
			// 		// 			resolve(res.data.data)
			// 		// 		}, 1000)
			// 		// 	},
			// 		// 	fail: () => {
			// 		// 		reject()
			// 		// 	}
			// 		});
			// 	})
			// },
			submitTo(){
				
				if(this.imgArr.length == 0){
						uni.showToast({
							title: '请先上传证件!',
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000,
						})
				}else{
					
					//显示加载
				   	uni.showToast({
				   		title:'正在采集',
						icon:"loading",
						duration: 9000,
				   	})
					//隐藏uni.hideToast();
				uni.uploadFile({
								/* url: 'http://192.168.1.13:8080/data/sfz/sfzShibieInfo', */ 
								url: app.globalData.serve_sfz_url+ 'sfzShibieInfo',
								filePath: this.imgArr[0],
								name: 'image',
								formData: {
									'image':this.imgArr[0] 
								},
								method: 'POST',
								async: false,
								processData: false,
								contentType: false,
								dataType: 'json', 
								success: res => {
									uni.hideToast();
									let itemData = JSON.parse(res.data)
									let fileName = itemData.fileName;
									
									if(itemData.data == 'sfzerr'){
									    uni.showToast({
									    	title: '无法识别证件信息!',
									    	icon: 'error',
									    	//显示持续时间为 2秒
									    	duration: 2000,
									    })
									}else{
										let sfzItem = JSON.parse(itemData.body.data).data.face.data;
										var reg = /.+?(省|市|自治区|自治州|县|区)/g;
										let dizhi = sfzItem.address;
										let splitDizhi = dizhi.match(reg)
										
										
										app.globalData.sfzItem.fileName = fileName;
										app.globalData.sfzItem.sfzNo = sfzItem.idNumber;
										app.globalData.sfzItem.sfzName = sfzItem.name;
										app.globalData.sfzItem.sfzMinzu = sfzItem.ethnicity + '族';
										app.globalData.sfzItem.sfzSheng = splitDizhi[0];
										app.globalData.sfzItem.sfzShi =  splitDizhi[1];
										app.globalData.sfzItem.sfzXian = splitDizhi[2];
										if((splitDizhi[1].endsWith('区'))  ||  (splitDizhi[1].endsWith('县'))){
											app.globalData.sfzItem.sfzShi = '';
											app.globalData.sfzItem.sfzXian = splitDizhi[1];	
										}
										app.globalData.sfzItem.sfzAddress = dizhi;
										app.globalData.sfzItem.zhuzhi = dizhi;
										var str = 'sfzCaiJi';
										uni.navigateTo({
											url:'../procurementDanAdd/procurementDanAdd?str=' + str
										})
										this.eliminate();
									}
								}
							});
					
			
						
				                
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f7fc;
	}
</style>

<style lang="scss" scoped>
	.shoudong{
		margin: 1.5vh 0px 0 62vw;
		color: red;
		text-decoration-line: underline;
		font-size: 25rpx;
	}
	.ithui {
		&-content {
			.mt-20 {
				margin-top: 20rpx;
			}

			.upload {
				background: #fff;

				&-box {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					padding: 0 20rpx 30rpx 20rpx;
				}

				h2 {
					color: #999;
					font-weight: normal;
					text-align: left;

					font-size: 32rpx;
					padding: 20rpx 0 30rpx 40rpx;
				}

				&-item {
					background: #fff;
					border-radius: 20rpx;
					margin: 0 16rpx;

					.intro {
						border-radius: 0 0 20rpx 20rpx;
						text-align: center;
						font-size: 28rpx;
						padding: 16rpx 0;
					}
				}
			}

			.expect {
				color: #333;
				font-size: 26rpx;
				padding: 40rpx 30rpx 10rpx 30rpx;
				background: #fff;

				h2 {
					color: #999999;
					font-weight: normal;
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}

				&-text {
					text {
						font-style: normal;
						color: #ff5050;
					}
				}

				.error {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&-item {
						text-align: center;
						padding: 20rpx 0;
						flex: 1;
						margin: 20rpx 5rpx;

						image {
							width: 160rpx;
							height: 120rpx;
							margin: 0 auto;
						}

						text {
							font-size: 24rpx;
							color: #919191;
						}
					}
				}
			}

			.confirm {
				h2 {
					color: #999;
					font-weight: normal;
					font-size: 32rpx;
					padding: 30rpx;
					background-color: #fff;
				}

				&-item {
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					-webkit-box-align: center;
					-webkit-align-items: center;
					align-items: center;
					padding: 30rpx;
					position: relative;
					background-color: #fff;

					.key {
						-webkit-box-flex: 1;
						-webkit-flex: 1;
						flex: 1;
						min-width: 0;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					.val {}
				}

				.b-line {
					position: relative;

					&:after {
						content: '';
						position: absolute;
						z-index: 2;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 2rpx;
						border-bottom: 2rpx solid #e2e2e2;
						transform: scaleY(0.5);
						transform-origin: 0 100%;
						-webkit-transform: scaleY(0.5);
						-webkit-transform-origin: 0 100%;
					}
				}
			}

			.submit2 {
				margin-top: 20rpx;
				padding: 20px;
			}
		}
	}
	.tupian {
		background-image: url('../../static/style-two/zm.png') ;
		background-size: cover;
		width: 100%;
		height: 100%;
	}
</style>